<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="列表高度">
                <el-input v-model="propJson.listHeight" style="width: 100%" placeholder="列表高度" />
            </el-form-item>

            <el-form-item label="列表个体唯一标识字段">
                <el-input v-model="propJson.menuIndex" style="width: 100%" placeholder="$." />
            </el-form-item>

            <el-form-item label="列表文本内容字段">
                <el-input v-model="propJson.menuTitle" style="width: 100%" placeholder="$." />
            </el-form-item>

            <el-form-item label="子列表字段名称">
                <el-input v-model="propJson.subMenuFieldName" style="width: 100%" placeholder="子列表字段名称" />
            </el-form-item>

            <el-form-item label="列表背景色">
                <el-color-picker v-model="propJson.backgroundColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="列表字体颜色">
                <el-color-picker v-model="propJson.textColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="列表激活字体颜色">
                <el-color-picker v-model="propJson.activeTextColor" color-format="hex" />
            </el-form-item>

            <el-divider>列表默认激活数据获取</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.defaultActiveActionInfo ? propJson.defaultActiveActionInfo : {}" :commonParam="commonParam" />

            <br />

            <el-divider>列表内容获取</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.actionInfo ? propJson.actionInfo : {}" :commonParam="commonParam" />

            <br />

            <el-form-item label="是否添加点击事件">
                <el-radio-group v-model="propJson.isClickAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isClickAction">列表点击触发事件</el-divider>

            <el-form v-if="propJson.isClickAction" :model="propJson" label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.menuClickInnerRequestVariable">
                        <template #title>
                            <div class="collapseTitle">
                                <span>{{item.name}}</span>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="item.type">
                                <el-radio label="custom">自定义</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="赋值字段" v-if="item.type === 'custom'">
                            <el-input v-model="item.variableName" style="width: 100%" placeholder="$."/>
                        </el-form-item>
                        <el-form-item label="item对象获取值" v-if="item.type === 'custom' && item.name === '内置参数 item'">
                            <el-input v-model="item.variableParamName" style="width: 100%" placeholder="$."/>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isClickAction">
                <el-button type="primary" class="addCollapse" size="small" @click="addClickAction()">添加点击行为</el-button>
            </div>

            <CommonThirdServiceAction v-if="propJson.isClickAction" :actionList="propJson.clickAction" :commonParam="commonParam"/>
        </el-form>
    </div>
</template>

<script name="MenuListDrawer" setup lang="ts">
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue"
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue"
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addClickAction() {
    if (!propJson.value.clickAction) {
        propJson.value.clickAction = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.clickAction.push(variableInfo)
}
</script>

<style scoped lang="less">

</style>